import { ChartData } from './../types/index'
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'

@Component
export default class ChartMixin extends Vue {
  @Prop({
    type: Object
  })
  data!: ChartData
  @Prop({
    type: Array,
    default: () => []
  })
  color!: string[]
  @Prop({
    type: String,
    default: '个'
  })
  unit!: string
  @Prop({
    type: Number,
    default: 100
  })
  dataZoomEnd!: number

  @Watch('data', {
    immediate: true,
    deep: true
  })
  handleDataChange(this: any, newVal: ChartData) {
    this.chartData = newVal
    const { color, unit, dataZoomEnd } = this.$props
    const { extendSettings, chartSettings, dataZoom } = this
    this.extendSettings = {
      ...extendSettings,
      color: color && color.length ? color : []
    }
    if (chartSettings) {
      this.chartSettings = {
        ...chartSettings,
        yAxisName: unit
      }
    }
    this.dataZoom = [
      {
        ...dataZoom[0],
        end: dataZoomEnd ? dataZoomEnd : 100
      }
    ]
  }

  dataZoom = [
    {
      type: 'inside',
      start: 0,
      end: 100
    }
  ]
}
